﻿<Page
    x:Class="CalciumTemplateApp.UI.OptionsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Views="using:CalciumTemplateApp.UI"
	xmlns:calcium="using:Outcoder.UI.Xaml"
    mc:Ignorable="d" d:DataContext="{d:DesignInstance Views:OptionsViewModel}">
	
	<Page.Resources>
        <CollectionViewSource 
			x:Name="OptionsViewSource" 
			IsSourceGrouped="True" 
			Source="{x:Bind Model.UserOptionGroupings}" />
		
        <DataTemplate x:Key="OptionsJumpTemplate">
            <Border Padding="5">
                <Border Background="{ThemeResource ListBoxItemSelectedBackgroundThemeBrush}" 
                    Height="52" HorizontalAlignment="Left">
                    <TextBlock Text="{Binding Group.Key.Title}" 
                           Foreground="{ThemeResource ListBoxItemSelectedForegroundThemeBrush}" 
                           FontSize="22" Padding="6" 
                           HorizontalAlignment="Left" VerticalAlignment="Center"/>
                </Border>
            </Border>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!-- Remove this blurb. -->
        <TextBlock TextWrapping="Wrap" Margin="12,12,0,12" FontSize="14">
            Options are rendered automatically once they have been registered
            with the IUserOptionsService. There are several built-in options
            for you to use. You can, however, define your own types,
            and/or define specific templates for the options.
            See the AppSettings class to learn how user options are registered.
        </TextBlock>
        <!-- /Remove -->
        <SemanticZoom Grid.Row="1">
            <SemanticZoom.ZoomedInView>
                <ListView Grid.Row="1" ItemsSource="{Binding Source={StaticResource OptionsViewSource}}" 
						  MinWidth="480">
                    <ListView.GroupStyle>
                        <GroupStyle HidesIfEmpty="True">
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Border Background="Transparent" Margin="0" Padding="0">
                                        <TextBlock Text="{Binding Key.Title, Converter={StaticResource CaseValueConverter}, ConverterParameter=Uppercase}" 
												   Foreground="{ThemeResource ForegroundForAppColorBrush}" />
                                    </Border>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListView.GroupStyle>
                    <ListView.Resources>
                        <!-- Define templates for presenting options. 
							A template can be specified when creating a new UserOption. 
							If the data type has no associated template, 
							then the name of the setting type is used as the template name. -->
                        <DataTemplate x:Key="Boolean">
                            <ToggleSwitch 
								Header="{Binding UserOption.Title}"
                                IsOn="{Binding Setting, Mode=TwoWay}"   
								Width="400" />
                        </DataTemplate>
                        <DataTemplate x:Key="String">
                            <StackPanel>
                                <TextBlock 
									Text="{Binding UserOption.Title}"                                                        
									Style="{StaticResource LabelTextStyle}" />
                                <TextBox 
									Text="{Binding Setting, Mode=TwoWay}" 
									InputScope="{Binding UserOption.InputScope}"
									HorizontalAlignment="Stretch"
									Width="400" />
                            </StackPanel>
                        </DataTemplate>

                        <DataTemplate x:Key="RelayOption">
                            <StackPanel>
                                <!-- Style="{StaticResource PhoneTextLargeStyle}" -->
                                <TextBlock 
									Text="{Binding UserOption.Title}"                                                        
                                             
									Margin="4,4,0,12" 
									calcium:Commanding.Command="{Binding UserOption.Command}" />
                            </StackPanel>
                        </DataTemplate>

                        <DataTemplate x:Key="Button">
                            <Button Content="{Binding UserOption.Title}" 
												Command="{Binding UserOption.Command}" 
												Margin="0,12,0,24" />
                        </DataTemplate>
                        <!--<DataTemplate x:Key="Int"></DataTemplate>-->
                        <!--<DataTemplate x:Key="Double"></DataTemplate>-->
                    </ListView.Resources>
                    <ListView.ItemTemplateSelector>
                        <calcium:UserOptionTemplateSelector />
                    </ListView.ItemTemplateSelector>
                </ListView>
            </SemanticZoom.ZoomedInView>
			<SemanticZoom.ZoomedOutView>
                <ListView Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
				  ItemsSource="{Binding Source={StaticResource OptionsViewSource}, Path=CollectionGroups}"
				  ItemTemplate="{StaticResource OptionsJumpTemplate}">
                </ListView>
            </SemanticZoom.ZoomedOutView>
			</SemanticZoom>
    </Grid>
</Page>
